<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>

</head>

<body>
    <div id="app">
        <div :style="{fontSize:blogFontSize+'em'}">
            <blog :value="searchText" @input="searchText=$event"></blog>
            <blog v-model="kk">1233</blog>
        </div>
        <cc>5555</cc>
    </div>

    <!-- 跟jquery一样先引用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 1、子组件中input标签的value，必须绑定props中的value (名字叫value )
        // 2、将子组件中input的input事件，暴露为input,并且将input的当前的值，作为参数，一起暴露出去
        Vue.component('blog',{
            props: ['value'],
            template:`
            <div>
                <span>
                    <input type="text" @input="$emit('input',$event.target.value)" :value="value">
                </span>
            </div>
            `
        })
        Vue.component('cc',{
            template:`
            <div>
                <slot></slot>
            </div>
            `
        })
        var app = new Vue({
            el: '#app',
            data:{
                    searchText:'既生瑜何生亮',
                    kk:'公瑾',
                    blogFontSize:1,
                    arr:[
                        {
                            id:1,
                            title:'111'
                        },
                        {
                            id:2,
                            title:'222'
                        },
                        {
                            id:3,
                            title:'333'
                        },
                    ]
            },
            //方法
            methods: {
                enlarge:function(){
                    console.log('111');
                    this.blogFontSize+=0.1;
                }
            },
            //监听
            watch:{
                searchText:function(){
                    console.log(this.searchText);
                },
                kk:function(){
                    console.log(this.kk);
                },
            }
        })
    </script>
</body>

</html>